<script setup lang="ts">

import {Page} from "@vben/common-ui";
import {ElButton, ElMessage, ElTable, ElTableColumn} from "element-plus";
import {computed, nextTick, onMounted, ref} from "vue";

const pageRef = ref();
const tableHeight = ref(undefined);

onMounted(async () => {
  await nextTick();
  if (pageRef.value && pageRef.value.$el) {
    tableHeight.value = pageRef.value.$el.offsetHeight;
  }
})
const tableData = ref(
  [
    {
      "用户ID": 1,
      "姓名": "李伟",
      "年龄": 28,
      "邮箱": "liwei@gmail.com",
      "注册日期": "2022-05-15"
    },
    {
      "用户ID": 2,
      "姓名": "王芳",
      "年龄": 34,
      "邮箱": "wangfang@yahoo.com",
      "注册日期": "2021-12-03"
    },
    {
      "用户ID": 3,
      "姓名": "张娜",
      "年龄": 45,
      "邮箱": "zhangna@outlook.com",
      "注册日期": "2023-01-22"
    },
    {
      "用户ID": 4,
      "姓名": "刘秀英",
      "年龄": 22,
      "邮箱": "liuxiuying@hotmail.com",
      "注册日期": "2020-08-30"
    },
    {
      "用户ID": 5,
      "姓名": "陈敏",
      "年龄": 37,
      "邮箱": "chenmin@gmail.com",
      "注册日期": "2022-11-19"
    },
    {
      "用户ID": 6,
      "姓名": "杨静",
      "年龄": 29,
      "邮箱": "yangjing@yahoo.com",
      "注册日期": "2021-07-08"
    },
    {
      "用户ID": 7,
      "姓名": "赵丽",
      "年龄": 41,
      "邮箱": "zhaoli@outlook.com",
      "注册日期": "2023-03-17"
    },
    {
      "用户ID": 8,
      "姓名": "孙强",
      "年龄": 36,
      "邮箱": "sunqiang@hotmail.com",
      "注册日期": "2020-10-05"
    },
    {
      "用户ID": 9,
      "姓名": "周磊",
      "年龄": 25,
      "邮箱": "zhoulei@gmail.com",
      "注册日期": "2022-09-14"
    },
    {
      "用户ID": 10,
      "姓名": "吴军",
      "年龄": 52,
      "邮箱": "wujun@yahoo.com",
      "注册日期": "2021-04-02"
    },
    {
      "用户ID": 11,
      "姓名": "郑敏",
      "年龄": 31,
      "邮箱": "zhengmin@outlook.com",
      "注册日期": "2023-02-28"
    },
    {
      "用户ID": 12,
      "姓名": "黄静",
      "年龄": 27,
      "邮箱": "huangjing@hotmail.com",
      "注册日期": "2020-11-25"
    },
    {
      "用户ID": 13,
      "姓名": "赵雷",
      "年龄": 40,
      "邮箱": "zhaolei@gmail.com",
      "注册日期": "2022-06-10"
    },
    {
      "用户ID": 14,
      "姓名": "陈丽",
      "年龄": 33,
      "邮箱": "chenli@yahoo.com",
      "注册日期": "2021-01-18"
    },
    {
      "用户ID": 15,
      "姓名": "刘洋",
      "年龄": 24,
      "邮箱": "liuyang@outlook.com",
      "注册日期": "2023-04-07"
    },
    {
      "用户ID": 16,
      "姓名": "王强",
      "年龄": 42,
      "邮箱": "wangqiang@hotmail.com",
      "注册日期": "2020-09-24"
    },
    {
      "用户ID": 17,
      "姓名": "孙磊",
      "年龄": 38,
      "邮箱": "sunlei@gmail.com",
      "注册日期": "2022-10-13"
    },
    {
      "用户ID": 18,
      "姓名": "周敏",
      "年龄": 26,
      "邮箱": "zhoumin@yahoo.com",
      "注册日期": "2021-05-22"
    },
    {
      "用户ID": 19,
      "姓名": "吴丽",
      "年龄": 50,
      "邮箱": "wuli@yahoo.com",
      "注册日期": "2023-01-09"
    },
    {
      "用户ID": 20,
      "姓名": "郑磊",
      "年龄": 35,
      "邮箱": "zhenglei@outlook.com",
      "注册日期": "2022-08-27"
    },
    {
      "用户ID": 21,
      "姓名": "黄磊",
      "年龄": 23,
      "邮箱": "huanglei@hotmail.com",
      "注册日期": "2020-12-12"
    }
  ]

)

const tableHeightValue = computed(() => {
  if (!tableHeight.value) {
    return undefined;
  }
  return tableHeight.value - 120 - 88;
})
</script>

<template>
  <Page
    :description="'Element Plus-Table演示 tableHeight: ' + tableHeight"
    title="Element Plus Demo"
    auto-content-height
    ref="pageRef"
  >
    <!--    <div style="height: 100%;display: flex;flex-direction: column">-->
    <!--      <div style="flex: 1;background-color: #ccff70">-->
    <ElTable
    :data="tableData"
    :max-height="tableHeightValue"
    border
    stripe
    >
      <ElTableColumn prop="用户ID" label="用户ID"/>
      <ElTableColumn prop="姓名" label="姓名"/>
      <ElTableColumn prop="年龄" label="年龄"/>
      <ElTableColumn prop="邮箱" label="邮箱"/>
      <ElTableColumn prop="注册日期" label="注册日期"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small"
                     @click="() => {ElMessage.warning('暂不支持编辑' + scope.$index)}">编辑{{scope
            .$index}}</el-button>
          <el-button type="danger" size="small" @click="() => {tableData.splice(scope.$index, 1) }">删除</el-button>
        </template>
      </el-table-column>
    </ElTable>
    <!--      </div>-->
    <!--    </div>-->
  </Page>
</template>

<style scoped>

</style>
